<template>
	<div class="view_page weizhi">
		<el-card class="box-card" v-loading="loading" element-loading-text="拼命加载中"
			element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
			<!--卡片头部-->
			<div slot="header" class="clearfix">
				<!--左侧-->
				<div class="left">
					<div class="back-page">
						<div class="add-back" @click="back">
							<i class="fa fa-arrow-left" aria-hidden="true"></i>
							<span v-if="this.addtype == 'add'">新增图标</span>
							<span v-else>修改图标</span>
						</div>
					</div>
				</div>
				<div class="right">
					<el-button type="primary" @click="save()">保存</el-button>
					<!-- <el-button type="primary" @click="update()" v-if="addtype == 'update'"
            >保存</el-button
          > -->
				</div>
			</div>
			<!--卡片内容-->
			<div class="card-centont">
				<el-form :model="liveData" label-width="180px">

					<!-- <el-form-item label="类型名称" :required="true">
						<el-input v-model="liveData.name" placeholder="请输入类型名称" @input="liveData.name=liveData.name.substring(0,4)"></el-input>
					</el-form-item> -->
					<el-form-item label="图标文件" label-width="180px" :required="true" v-if="this.addtype == 'add'">
						<el-upload class="upload-demo" ref="upload0" :action="uploadUrl" :on-preview="handlePreview0"
							:on-remove="handleRemove0" :file-list="fileList0" :data="uploadData0"
							:before-upload="beforeAvatarUpload0" :on-success="handleAvatarSuccess0"
							:on-error="handleAvatarError0" :on-exceed="numberExceeded0" :auto-upload="true"
							accept=".zip" :limit="1">
							<el-button slot="trigger" size="small" type="primary">选取文件
							</el-button>
						</el-upload>
					</el-form-item>
					<el-form-item label="备注" :required="true">
						<el-input v-model="liveData.remark" placeholder="请输入图标备注" type="textarea":rows="2"></el-input>
					</el-form-item>
					<el-form-item label="是否启用" :required="true">
						<el-switch
						  v-model="liveData.has_enable"
						  inactive-color="#ff4949"
						>
						</el-switch>
					</el-form-item>
				</el-form>
			</div>
		</el-card>

	</div>
</template>

<script>
	import axios from "axios";
	import qs from "qs";
	import {
		Message
	} from "element-ui";

	export default {
		name: "liveAdd",
		components: {},
		data() {
			return {
				userInfo: JSON.parse(
					localStorage.getItem(this.$apis.getLocalKey().loginPersonnelInformation)
				),
				loading: false,
				// uploadUrl: this.$apis.getUploadUrl() + "/file/upload", //上传地址
				uploadUrl: "https://dongping.jnaw.top/smxc/file/upload",

				liveData: {
					file: '',
					remark: '',
					has_enable:false
				},
				addtype:'',
				file_id0: '',
				fileList0: [],
				file_image0: '',
				uploadData0: {
					type: 1 //没用
				},
			};
		},
		created() {
			var _this = this;
			this.addtype = this.$route.query.type;
			if(this.$route.query.type=='add'){

			}else{
				var getdata =JSON.parse( this.$route.query.data)
				this.liveData = getdata
}

		},

		methods: {



			initData() {
				this.liveData = {

				};
			},
			//上传文件
			submitUpload0() {
				this.$refs.upload.submit();
			},
			//文件列表移除文件时的钩子
			handleRemove0(file, fileList) {

				this.fileList0 = fileList
				this.file_id0 = ''
				this.liveData.file = ''
				// if (this.addtype == "add") {
					// this.file_image0 = "";
				// } else {
				// 	this.file_image0 = this.qudata.cover_files_url;
				// }
			},

			//点击文件列表中已上传的文件时的钩子
			handlePreview0(file) {
				console.log(file);

			},

			//文件上传成功的钩子
			handleAvatarSuccess0(res, file, fileList) {
				console.log(res);
				this.fileList0 = fileList
				this.file_id0 = res.data.id;
				this.liveData.file = res.data.id;
				// this.file_image0 = res.data.url

				// this.imageUrl = URL.createObjectURL(file.raw)
			},

			//文件上传失败时的钩子
			handleAvatarError0(err, file) {
				Message.error("文件上传失败，请稍后再试");
			},

			//文件超出一个
			numberExceeded0() {
				Message.warning("只能上传一个文件");
			},

			//上传文件之前的钩子
			beforeAvatarUpload0(file) {
				// var typeList = ["image/jpeg", "image/png", "image/jpg"];
				// const isJPG = file.type === 'image/jpeg'
				// const isJPG = typeList.includes(file.type);
				const isLt2M =true

				// if (!isJPG) {
				// 	this.$message.warning("上传图片只能是 JPG或者PNG 格式!");
				// }
				// if (!isLt2M) {
				// 	this.$message.warning("上传文件大小不能超过 10MB!");
				// }
				return  isLt2M;
			},

			save() {
				var _this = this
				var datas = JSON.parse(JSON.stringify(this.liveData))
				
				if(datas.remark==''||datas.remark==undefined||datas.remark==null){
					Message.warning('文件备注不能为空')
					return
				}
				// if(datas.warn_name==''||datas.warn_name==undefined||datas.warn_name==null){
				// 	Message.warning('预警名称不能为空')
				// 	return
				// }

			if(this.addtype=='add'){
				if(datas.file==''||datas.file==undefined||datas.file==null){
					Message.warning('图标文件不能为空')
					return
				}
				_this.$apis.unity_icon_version_add(datas).then(res=>{
					if(res.result==0){
						Message.success('添加成功')
					 _this.back()
					}
				})


			}else{
				datas.id =JSON.parse(_this.$route.query.data).id
				// console.log(datas)
				_this.$apis.unity_icon_version_update(datas).then(res=>{
					if(res.result==0){
						Message.success('修改成功')
					 _this.back()
					}
				})
			}

			},

			back() {
				this.$router.back();
			},


		}
	};
</script>

<style lang="scss" scoped>
	.weizhi .weizhi .el-dialog__body {
		height: 500px;
	}

	/*.hide {
		.el-cascader-menu:first-of-type {
			.el-cascader-node {
				.el-checkbox {
					display: none;
				}
			}
		}
	}*/

	// .el-cascader-panel > div:first-child .el-checkbox {
	//   display: none;
	// }
</style>
